import { Button, Form, Input } from "antd";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useStore } from "@/bootstrap/useStore/index";
const Login = () => {
    const navigate = useNavigate();
    const { authStore } = useStore();
    const [current, setCurrent] = useState(0);
    const [form] = Form.useForm();
    const onChangeCurrent = (e: number) => {
        setCurrent(e);
    }
    const onLogin = async () => {
        await authStore.AuthLogin(form.getFieldsValue());
        navigate('/store')
    }
    const handlerRegister = () => {
        navigate('/register');
    }
    const handlerForget = () => {
        navigate('/forget');
    }
    const loginMethods = () => {
        return current ?
            <Form form={form}>
                <Form.Item name="username" >
                    <Input placeholder="手机号" className="form-username" />
                </Form.Item>
                <Form.Item name="code">
                    <Input.Group compact>
                        <Input className="form-code" placeholder="验证码" />
                        <Button className="form-send" type="primary">获取验证码</Button>
                    </Input.Group>
                </Form.Item>
                <Form.Item>
                    <Button onClick={onLogin} className="form-submit" type="primary">登录</Button>
                </Form.Item>
            </Form>
            :
            <Form form={form}>
                <Form.Item name="username">
                    <Input placeholder="手机号/邮箱" className="form-username" />
                </Form.Item>
                <Form.Item name="password">
                    <Input placeholder="密码" type="password" className="form-password" />
                </Form.Item>
                <Form.Item>
                    <Button onClick={onLogin} className="form-submit" type="primary">登录</Button>
                </Form.Item>
            </Form>

    }
    return (
        <div className="login">
            <div className="login-header">
                <span className="header-title">入狱通行证</span>
            </div>
            <div className="login-main">
                <div className="main-intro">
                    <div className="intro-title">
                        smile
                    </div>
                    <div className="intro-remark">
                        入门到入狱，何尝不轻易!!!
                    </div>
                </div>
                <div className="main-content">
                    <div className="content-nav">
                        <div className={!current ? "nav-item current" : "nav-item"} onClick={() => onChangeCurrent(0)}>账号登录</div>
                        <div className={current ? "nav-item current" : "nav-item"} onClick={() => onChangeCurrent(1)}>短信登录</div>
                    </div>
                    <div className="content-form">
                        {loginMethods()}
                    </div>
                    <div className="content-options">
                        <span className="options-register" onClick={handlerRegister}>注册</span>
                        <span className="options-forget" onClick={handlerForget}>忘记密码?</span>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default Login;